<template>
    <div>
        <h-section title="本阶段新增需求" collapse>
            <a-button block type="dashed" class="create-btn" @click="handleCreateTaskRequest" v-if="!disabled">
                <PlusOutlined />
                <span>录入需求</span>
            </a-button>
            <TaskRequireList
                ref="TaskRequireListRef"
                :lubiaoDetail="lubiaoDetail"
                :disabled="disabled"
                style="height: 30vh"
                @success="handleCreateTaskRequestSuccess"
            />
        </h-section>
        <h-section title="原有业务需求" collapse>
            <UnVersionTaskRequireList :disabled="disabled" :lubiaoDetail="lubiaoDetail" style="height: 30vh" v-if="lubiaoDetail.id" />
        </h-section>
        <h-section title="原有产品需求" collapse>
            <UnVersionProRequireList :disabled="disabled" :lubiaoDetail="lubiaoDetail" style="height: 30vh" v-if="lubiaoDetail.id" />
        </h-section>
        <CreateTaskRequestModal :lubiaoDetail="lubiaoDetail" ref="CreateTaskRequestModalRef" @success="handleCreateTaskRequestSuccess" />
    </div>
</template>

<script lang="ts">
import CreateTaskRequestModal from './CreateTaskRequestModal.vue';
import TaskRequireList from './TaskRequireList.vue';
import UnVersionTaskRequireList from './UnVersionTaskRequireList.vue';
import UnVersionProRequireList from './UnVersionProRequireList.vue';
import { PlusOutlined } from '@ant-design/icons-vue';
import { defineComponent, ref, unref } from 'vue';
export default defineComponent({
    components: {
        PlusOutlined,
        CreateTaskRequestModal,
        TaskRequireList,
        UnVersionTaskRequireList,
        UnVersionProRequireList
    },
    props: {
        lubiaoDetail: {
            type: Object,
            default: () => ({})
        },
        disabled: {
            type: Boolean,
            default: false
        }
    },
    setup() {
        const TaskRequireListRef = ref<any>();
        const CreateTaskRequestModalRef = ref<any>();
        const handleCreateTaskRequest = () => {
            unref(CreateTaskRequestModalRef).open();
        };
        const handleCreateTaskRequestSuccess = () => {
            unref(TaskRequireListRef).init();
        };
        return {
            TaskRequireListRef,
            CreateTaskRequestModalRef,
            handleCreateTaskRequest,
            handleCreateTaskRequestSuccess
        };
    }
});
</script>

<style scoped lang="less">
.create-btn {
    color: #107ed5;
    width: 100%;
    margin: 0 0 8px 0;
    background: rgba(16, 126, 213, 0.08);
    border-color: rgba(16, 126, 213, 0.08);
}
</style>